<template>
  <div class="wrapper">
    <div class="item">
      <h2 class="biaoti">单曲</h2>
      <ul>
        <li class="item-list" v-for="(item, index) in result.song.songs" :key="item.id" @click="play(index, result.song.songs, item.id)">
          <p class="name">{{item.name}}</p>
          <p class="art">
            <span v-for="(val, index) in item.ar" :key="index">{{val.name}}</span> - <span>{{item.al.name}}</span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 歌单 -->
    <div class="item">
      <h2 class="biaoti">歌单</h2>
      <div class="xunhuan" v-for="item in result.playList.playLists" :key="item.id"
      @click="togo(item.id)"
      >
        <div class="left">
          <img :src="item.coverImgUrl" alt="">
        </div>
        <div class="right">
          <p class="name">{{item.name}}</p>
          <p class="zhuanji">{{item.creator.nickname}}</p>
          <p class="xinxi">
            <span>{{item.trackCount}}首</span>
            <span>by {{item.creator.nickname}}</span>
            <span>{{item.playCount}}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 相关搜索 -->
    <div class="item">
      <h2>相关搜索</h2>
      <div class="left">
        <img src="" alt="">
      </div>
      <div class="right">

      </div>
    </div>
    <!-- 专辑 -->
    <div class="item">
      <h2>专辑</h2>
      <div class="left">
        <img src="" alt="">
      </div>
      <div class="right">

      </div>
    </div>
  </div>
</template>
<script>
import bus from '@/bus.js'
export default {
  name: 'seardata',
  data () {
    return {
      result: {},
      list: []
    }
  },
  computed: {

  },
  methods: {
    togo (id) { // 有问题
      this.axios.get('/api/playlist/detail?id=' + id).then((res) => {
        console.log(res.data)
        if (res.data.code === 200) {
          const list = res.data.playlist
          this.$router.push({ name: 'song', params: { list } })
        }
      })
    },
    play (index, alllist, id) {
      const that = this
      // 点击某首歌时，需要索引和全部歌曲
      this.$store.commit('fullplay', { index, alllist }) // 歌曲信息存到仓库
      this.$store.dispatch('getUrl', { that, id })
      bus.$emit('show')
    },
    getSite () {
      this.axios.get(`/api/search?keywords=${this.$route.params.val}&limit=30&offset=0&type=1018`).then((res) => { // 针对hotlist页面的searchWord进行数据请求
        console.log(res.data)
        if (res.data.code === 200) {
          this.result = res.data.result
        }
      })
    }
  },
  mounted () {
    this.getSite()
  }
}
</script>
<style lang="stylus" scoped>
.xunhuan
  display flex
  margin-bottom .2rem
  .left
    margin-right .3rem
    img
      width 1.68rem
      height 1.68rem
  .right
    margin-top .1rem
    line-height .5rem
    .name
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    span
      margin-right .1rem
.biaoti
  margin-bottom .3rem
  color black
  font-weight 700
.item-list
  width 7rem
  height 1.04rem
  font-size .28rem
  .art
    font-size: 0.16rem
    color: #dacdcd
</style>
